<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'

const route = useRoute()

const bookData = ref([])
const getInfo = async (id) => {
    const res = await request.get('/findBook', {
        params: {
            id
        }
    })
    console.log(res)
    bookData.value = res.data.data
}
onMounted(() => {
    getInfo(route.params.id)
})

const num = ref(1)

const good = ref({
    userId: '',
    bookId: '',
    bookname: '',
    author: '',
    price: '',
    image: '',
    num: '',
    inventory: ''
})


const addCart = async () => {
    if (JSON.parse(localStorage.getItem('loginStore')) == null) {
        ElMessage({
            type: 'warning',
            message: '未登录！！！'
        })
        return
    }
    if (num.value > bookData.value.inventory || bookData.value.inventory === 0) {
        ElMessage({
            type: 'warning',
            message: '库存不足！！！'
        })
    } else {
        good.value = {
            userId: JSON.parse(localStorage.getItem('loginStore')).id,
            bookId: bookData.value.id,
            bookname: bookData.value.bookname,
            author: bookData.value.author,
            price: bookData.value.price,
            image: bookData.value.image,
            num: num.value,
            inventory: bookData.value.inventory - num.value
        }
        await request.post('/cart', good.value)
        ElMessage({
            type: 'success',
            message: '添加成功'
        })
        getInfo(good.value.bookId)
    }
}

const router = useRouter()

const goBack = () => {
    router.go(-1)
}
</script>
<template>
    <el-page-header :icon="ArrowLeft" class="header" @click="goBack">
        <template #content>
            <span class="text-large font-600 mr-3"> {{ bookData.bookname }} </span>
        </template>
    </el-page-header>
    <div class="main">
        <div class="left">
            <img :src="bookData.image" alt="">
        </div>
        <div class="right">
            <div class="name">{{ bookData.bookname }}</div>
            <div class="author">{{ bookData.author }}</div>
            <div class="price">&yen;{{ parseFloat(bookData.price).toFixed(2) }}</div>
            <el-input-number v-model="num" :min="1" />
            <div class="add" @click="addCart">加入购物车</div>
            <div class="inventory">库存：{{ bookData.inventory }}</div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.header {
    width: 1400px;
    margin: 0 auto;
    color: red;
    padding-top: 18px;
    padding-left: 18px;
}

.main {
    display: flex;
    justify-content: space-between;
    width: 1400px;
    margin: 0 auto;
    padding: 40px 60px;
    background-color: #FCFCFC;

    .left {
        width: 300px;
        height: 500px;

        img {
            width: 300px;
            height: 350px;
        }
    }

    .right {
        width: 300px;
        height: 500px;
        text-align: center;
        margin-right: 100px;

        .name {
            font-size: 24px;
            color: black;
            margin-bottom: 30px;
        }

        .author {
            font-size: 18px;
            color: gray;
            margin-bottom: 15px;
        }

        .price {
            font-size: 20px;
            color: red;
            margin-bottom: 15px;
        }

        .add {
            width: 160px;
            height: 50px;
            margin: 0 auto;
            margin-top: 60px;
            border-radius: 30px;
            background-color: aqua;
            color: white;
            font-size: 16px;
            line-height: 50px;
            font-weight: 600;
            transition: .3s linear;
            cursor: pointer;

            &:hover {
                background-color: red;
            }
        }
    }
}
</style>